<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8">

    <!-- <link rel="apple-touch-icon" type="image/png"
        href="https://cpwebassets.codepen.io/assets/favicon/apple-touch-icon-5ae1a0698dcc2402e9712f7d01ed509a57814f994c660df9f7a952f3060705ee.png" /> -->
    <meta name="apple-mobile-web-app-title" content="CodePen">

    <!-- <link rel="shortcut icon" type="image/x-icon"
        href="https://cpwebassets.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico" />

    <link rel="mask-icon" type=""
        href="https://cpwebassets.codepen.io/assets/favicon/logo-pin-8f3771b1072e3c38bd662872f6b673a722f4b3ca2421637d5596661b4e2132cc.svg"
        color="#111" /> -->


    <title>CodePen - A Pen by anjia</title>




    <style>
        body {
            font-family: 'Microsoft Yahei';
        }

        ol,
        ul {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        h1 {
            margin-top: 40px;
            text-align: center;
            color: #333;
        }

        /*表盘*/
        .clock {
            position: relative;
            width: 200px;
            height: 200px;
            border-radius: 100%;
            background-color: #292a38;
            margin: 50px auto;
        }

        .pointer li.circle {
            position: absolute;
            top: 50%;
            left: 50%;
            transform-origin: left center;
            background: #fff;
            width: 10px;
            height: 10px;
            border-radius: 100%;
            margin-top: -5px;
            margin-left: -5px;
        }

        /*刻度*/
        .line-hour li,
        .line-min li {
            position: absolute;
            left: 50%;
            top: 50%;
            transform-origin: 0 0;
            background-color: #fff;
        }

        .line-hour li {
            width: 10px;
            height: 2px;
        }

        .line-min li {
            width: 5px;
            height: 2px;
        }

        /*数字*/
        .number {
            position: absolute;
            height: 150px;
            width: 150px;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            font-size: 15px;
            color: #fff;
        }

        .number li {
            position: absolute;
            transform: translate(-50%, -50%);
        }

        /*指针*/
        .pointer li {
            position: absolute;
            top: 50%;
            left: 50%;
            transform-origin: left center;
            background: #fff;
        }

        .pointer li.hour {
            width: 45px;
            height: 3px;
            margin-top: -1px;
        }

        .pointer li.min {
            width: 60px;
            height: 2px;
            margin-top: -1px;
        }

        .pointer li.sec {
            width: 90px;
            height: 1px;
            margin-top: -1px;
            background-color: red;
        }
    </style>

    <script>
        window.console = window.console || function (t) { };
    </script>



    <script>
        if (document.location.search.match(/type=embed/gi)) {
            window.parent.postMessage("resize", "*");
        }
    </script>


</head>

<body translate="no">
    <h1>CSS 时钟效果演示</h1>

    <div class="clock">
        <ul class="line-min"></ul>
        <ul class="line-hour"></ul>
        <ol class="number"></ol>
        <ul class="pointer">
            <li class="hour"></li>
            <li class="min"></li>
            <li class="sec"></li>
            <li class="circle"></li>
        </ul>
    </div>
    <!-- <script
        src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-157cd5b220a5c80d4ff8e0e70ac069bffd87a61252088146915e8726e5d9f147.js"></script> -->

    <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
    <script id="rendered-js">
        function init() {
            drawLines($('.line-min'), 60, 85);
            drawLines($('.line-hour'), 12, 80);
            drawNumbers($('.number'));
            move();
        }
        init();


        /*
         * 绘制钟表刻度线
         * @param wrap 刻度线的父容器
         * @param total 刻度线的总个数
         * @param translateX 刻度线在x轴方向的偏移量
         */
        function drawLines(wrap, total, translateX) {
            var gap = 360 / total;
            var strHtml = '';
            for (var i = 0; i < total; i++) {
                strHtml += '<li style="transform:rotate(' + i * gap + 'deg) translate(' + translateX + 'px,-50%)"></li>';
            }
            wrap.html(strHtml);
        }


        /* 
         * 绘制时钟数字
         * @param wrap 数字的父容器
         */
        function drawNumbers(wrap) {
            var radius = wrap.width() / 2;

            var strHtml = '';
            for (var i = 1; i <= 12; i++) {
                var myAngle = (i - 3) / 6 * Math.PI;

                var myX = radius + radius * Math.cos(myAngle), // x=r+rcos(θ)
                    myY = radius + radius * Math.sin(myAngle); // y=r+rsin(θ)

                strHtml += '<li style="left:' + myX + 'px; top:' + myY + 'px">' + i + '</li>';
            }
            wrap.html(strHtml);
        }


        /*
         * 钟表走动，转动秒针、分针、时针
         */
        function move() {
            var domHour = $(".hour"),
                domMin = $(".min"),
                domSec = $(".sec");

            setInterval(function () {
                var now = new Date(),
                    hour = now.getHours(),
                    min = now.getMinutes(),
                    sec = now.getSeconds();

                var secAngle = sec * 6 - 90, // s*6-90
                    minAngle = min * 6 + sec * 0.1 - 90, // m*6+s*0.1-90
                    hourAngle = hour * 30 + min * 0.5 - 90; // h*30+m*0.5 - 90

                domSec.css('transform', 'rotate(' + secAngle + 'deg)');
                domMin.css('transform', 'rotate(' + minAngle + 'deg)');
                domHour.css('transform', 'rotate(' + hourAngle + 'deg)');

                document.title = hour + ':' + min + ':' + sec;

            }, 1000);

        }
//# sourceURL=pen.js
    </script>



</body>

</html>